<template>
<view>
	<view class="header">增长率统计</view>
	<!-- <view class="header1">
		<picker mode="date" :value="sdate" @change="bindDate" data-key="sdate">
			<view class="uni-input weui-input">{{sdate ? sdate : '请选择开始日期'}}</view>
		</picker>
		<picker mode="date" :value="edate" @change="bindDate" data-key="edate">
			<view class="uni-input weui-input">{{edate ? edate : '请选择结束日期'}}</view>
		</picker>
		<view class="header_bottom" @click="search">搜索</view>
	</view> -->
	<view class="top">
		<view @click="selectCate(1)" class="header_select border_right" :class="type == 1 ? 'border-bottom' : ''">按年</view>
	    <view @click="selectCate(2)" class="header_select border_right" :class="type == 2 ? 'border-bottom' : ''">按月</view>
		<picker class="select_input" @change="bindCard" :value="cardIndex"
		:range="card" v-if="card.length > 0"
		range-key="name">
			<view>{{card[cardIndex]}}</view>
		</picker>
	</view>
	<view class="table">
		<table border="0" width="95%" cellspacing="0" cellpadding="0">
			<tr>
				<th colspan="3">{{card[cardIndex]}}</th>
			</tr>
			<tr>
				<td>时间</td>
				<td>数量</td>
				<td>增长率</td>
			</tr>
			<tr v-for="(item,index) in list" :key="index">
				<td>{{item.time}}</td>
				<td>{{item.num}}</td>
				<td>{{item.inc}}</td>
			</tr>
		</table>
	</view>
</view>
</template>
<script>
import request from '@/util/request.js'
export default {
	data() {
		return {
			list:[],
			sdate:'',
			edate:'',
			type:1,
			cardIndex:0,
			card:['营业额','总成本','顾客数量','顾客耗卡','顾客充值','顾客开卡','商品销售']
		}
	},
	onLoad:function(){
		uni.showLoading({
		    title: '加载中'  
		});
		this.getList()
	},
	methods: {
		getList:function(){
			var data = {
				oa_id:uni.getStorageSync('oa_id'),
				cardIndex:this.cardIndex,
				type:this.type
			}
			var that = this;
			request({
				url: 'manage/inc/res',
				method: 'get',
				data:data,
				success: (res) => {
					uni.hideLoading();
					that.list = res.data.data
				}
			})
		},
		bindCard:function(e){
			this.cardIndex = e.detail.value
			uni.showLoading({
			    title: '加载中'  
			});
			this.list = []
			this.getList();
		},
		selectCate:function(key){
			this.type = key
			uni.showLoading({
			    title: '加载中'  
			});
			this.list = []
			this.getList();
		},
		search:function(){
			if(!this.sdate && !this.edate){
				uni.showToast({
					title: '请选择开始日期和结束日期!!!',
					icon: "none", 
					position:'bottom',
				});
				return;
			}
			uni.showLoading({
			    title: '加载中'  
			});
			this.getList();
		},

	},
}
</script>
<style>
.header{
    width:100%;
    height:80rpx;
    line-height: 80rpx;
    text-align: center;
    background:#00b300;
    color:#fff;
}
.table{
	width:100%;
	padding:10rpx 20rpx 120rpx 20rpx;
}
td{
	border:1rpx solid #C8C7CC;
	text-align: center;
	height:70rpx;
	line-height:70rpx;
}
th{
	border:1rpx solid #C8C7CC;
	text-align: center;
	height:70rpx;
	line-height:70rpx;
}
.size{
	font-size:12px;
}
.header1{
	width:100%;
	height:80rpx;
	display:flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.header1 picker{
	width:40%;
	text-align: center;
	border:1px dashed #E5E5E5;
}
.header_bottom{
	width:18%;
	height:70rpx;
	line-height: 70rpx;
	background: #009900;
	text-align: center;
	color:#FFFFFF;
}
.top{
    width:100%;
    height:80rpx;
    line-height: 80rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.header_select{
    width:33%;
    text-align: center;
    border-bottom:1px solid #b3b3b3;
}
.border_right{
    border-right:1px solid #b3b3b3;
}
.border-bottom{
    border-bottom: 3px solid red;
}
.select_input{
	width:33%;
	text-align: center;
	height:80rpx;
	line-height: 80rpx;
}
</style>